<template>
  <div class="home-container">
    <el-container class="box">
      <el-header>
        <div class="leftBox">
          <img src="../assets/heima.png"
               alt="">
          <h2>电商后台管理系统</h2>
        </div>
        <div>
          <el-button @click="logout"
                     type="info">退出</el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside :width="collapse?'70px':'200px'">
          <div style=""
               class="menuBtn"
               @click="collapse=!collapse">| | |</div>
          <el-menu :default-active="defaultActive"
                   class="el-menu-vertical-demo"
                   background-color="#373d41"
                   :unique-opened='true'
                   :collapse="collapse"
                   text-color="#fff"
                   :collapse-transition="false"
                   active-text-color="#409eff"
                   router>
            <el-submenu :index="item1.path+''"
                        v-for="(item1, index1) in menusList"
                        :key="index1">
              <template slot="title">
                <!-- <i class="el-icon-location"></i> -->
                <i style="margin-right:8px;"
                   :class="iconObj[item1.id]"></i>
                <span>{{item1.authName}}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item @click.native="itemHandle(item2.path)"
                              v-for="(item2,index2) in  item1.children"
                              :index="item2.path+''"
                              :key="index2"> <i class="el-icon-menu"></i>{{item2.authName}}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

          </el-menu>
        </el-aside>
        <el-main>
          <!-- welcome -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>
           
<script>
import { menusApi } from "@/api"
export default {
  name: '',
  data () {
    return {
      menusList: [],
      iconObj: {
        125: 'iconfont icon-users',
        103: 'iconfont icon-tijikongjian',
        101: 'iconfont icon-shangpin',
        102: 'iconfont icon-danju',
        145: 'iconfont icon-baobiao',
      },
      defaultActive: localStorage.getItem('defaultActive') || 'rights',
      collapse: false  //  false =>展开   true =>收起
    }
  },
  created () {
    this.getMenus()
  },
  methods: {
    /* 登出 */
    logout () {
      /* 
      1、显示弹出提示框
      2、点击确认按钮====清空token 【本地缓存的】
      3、跳转回login
       */

      this.$confirm('是否退出登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '退出成功!'
        });
        //  这里吧表示的是点击了 确认按钮
        //  2、点击确认按钮====清空token 【本地缓存的】
        localStorage.removeItem('token')
        //   3、跳转回login
        this.$router.push('/login')

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出登录'
        });
      });

    },

    // handleOpen (key,keyPath) {
    //   console.log(key,keyPath);
    // },
    // handleClose (key,keyPath) {
    //   console.log(key,keyPath,7777);
    // },
    async getMenus () {
      const res = await menusApi()
      console.log(res, 2222);
      this.menusList = res.data.data
    },
    /* 每一个item绑定点击事件 */
    itemHandle (path) {
      console.log(path, 88);
      /* 
      1、点击每一项获取当前的path值
      2、将path值存储得到本地缓存
      3、将path值赋值给默认项  defaultActive  【可写可不写】
      4、刷新进入页面
        4.1 获取本地缓存将值赋值给 defaultActive
        4.2 给其设置一个默认值
       */
      localStorage.setItem('defaultActive', path)
      this.defaultActive = path
    }
  }
}
</script>
<style lang='less'  scoped>
.home-container {
  height: 100%;
  .box {
    height: 100%;
  }
  .el-header {
    display: flex;
    justify-content: space-between;
    .leftBox {
      display: flex;
      h2 {
        color: #fff;
        margin-left: 15px;
        font-size: 22px;
        font-weight: 400;
      }
    }
  }

  .el-header,
  .el-footer {
    background-color: #373d41;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #373d41;
    color: #333;
    text-align: left;
    .menuBtn {
      color: #fff;
      text-align: center;
      font-size: 13px;
      padding: 2px 0;
      background-color: #4a5064;
      cursor: pointer;
    }
    .el-menu {
      border: none;
      /deep/ul.el-menu {
        .el-menu-item-group__title {
          padding: 0;
        }
      }
    }
  }

  .el-main {
    background-color: #e9eef3;
    color: #333;
    text-align: left;
   
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
}
</style>
